Micron Document
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
| SparkN0de-git | SparkN0de |
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

Node / ReticulumProjects / MeshChatX.git / files / tests / frontend / layoutUxOracle.test.js

Displaying Raw • Download


tests/frontend/layoutUxOracle.test.js 3f7ef731b5effd9aa3a81eceea66fd6c2b56498c (3f7ef731) Text, 5.63 KB

T8b949e// SPDX-License-Identifier: 0BSD

Tff7b72import Tb4b4b4{ Te6edf3describeTb4b4b4, Te6edf3itTb4b4b4, Te6edf3expectTb4b4b4, Te6edf3viTb4b4b4, Te6edf3beforeEachTb4b4b4, Te6edf3afterEach Tb4b4b4} Tff7b72from Ta5d6ff"vitest"Tb4b4b4;
Tff7b72import Tb4b4b4{ Te6edf3mount Tb4b4b4} Tff7b72from Ta5d6ff"@vue/test-utils"Tb4b4b4;
Tff7b72import Tb4b4b4{ Te6edf3readFileSync Tb4b4b4} Tff7b72from Ta5d6ff"node:fs"Tb4b4b4;
Tff7b72import Tb4b4b4{ Te6edf3resolve Tb4b4b4} Tff7b72from Ta5d6ff"node:path"Tb4b4b4;
Tff7b72import Te6edf3Toast Tff7b72from Ta5d6ff"@/components/Toast.vue"Tb4b4b4;
Tff7b72import Te6edf3CallOverlay Tff7b72from Ta5d6ff"@/components/call/CallOverlay.vue"Tb4b4b4;
Tff7b72import Te6edf3GlobalEmitter Tff7b72from Ta5d6ff"@/js/GlobalEmitter"Tb4b4b4;

Tff7b72const Te6edf3src Tff7b72= Tb4b4b4(Te6edf3relTb4b4b4) Tb4b4b4=> Te6edf3readFileSyncTb4b4b4(Te6edf3resolveTb4b4b4(Te6edf3__dirnameTb4b4b4, Ta5d6ff"../../meshchatx/src/frontend"Tb4b4b4, Te6edf3relTb4b4b4)Tb4b4b4, Ta5d6ff"utf8"Tb4b4b4)Tb4b4b4;

Te6edf3describeTb4b4b4(Ta5d6ff"layout UX oracle-light"Tb4b4b4, Tb4b4b4(Tb4b4b4) Tb4b4b4=> Tb4b4b4{
Te6edf3itTb4b4b4(Ta5d6ff"App shell drawer sits in middle pane without fake pt-16 header gap"Tb4b4b4, Tb4b4b4(Tb4b4b4) Tb4b4b4=> Tb4b4b4{
Tff7b72const Te6edf3app Tff7b72= Te6edf3srcTb4b4b4(Ta5d6ff"components/App.vue"Tb4b4b4)Tb4b4b4;
Te6edf3expectTb4b4b4(Te6edf3appTb4b4b4)Tb4b4b4.Te6edf3toContainTb4b4b4(Ta5d6ff'class="relative flex flex-1 w-full overflow-hidden'Tb4b4b4)Tb4b4b4;
Te6edf3expectTb4b4b4(Te6edf3appTb4b4b4)Tb4b4b4.Te6edf3toContainTb4b4b4(Ta5d6ff"absolute inset-y-0 left-0 z-70"Tb4b4b4)Tb4b4b4;
Te6edf3expectTb4b4b4(Te6edf3appTb4b4b4)Tb4b4b4.Te6edf3toContainTb4b4b4(Ta5d6ff"absolute inset-0 z-65"Tb4b4b4)Tb4b4b4;
Te6edf3expectTb4b4b4(Te6edf3appTb4b4b4)Tb4b4b4.Te6edf3notTb4b4b4.Te6edf3toContainTb4b4b4(Ta5d6ff"pt-16 sm:pt-0"Tb4b4b4)Tb4b4b4;
Te6edf3expectTb4b4b4(Te6edf3appTb4b4b4)Tb4b4b4.Te6edf3toContainTb4b4b4(Ta5d6ff"pt-[env(safe-area-inset-top,0px)]"Tb4b4b4)Tb4b4b4;
Tb4b4b4}Tb4b4b4)Tb4b4b4;

Te6edf3itTb4b4b4(Ta5d6ff"ConversationViewer message list uses overflow-y-auto and composer safe-area"Tb4b4b4, Tb4b4b4(Tb4b4b4) Tb4b4b4=> Tb4b4b4{
Tff7b72const Te6edf3cv Tff7b72= Te6edf3srcTb4b4b4(Ta5d6ff"components/messages/ConversationViewer.vue"Tb4b4b4)Tb4b4b4;
Te6edf3expectTb4b4b4(Te6edf3cvTb4b4b4)Tb4b4b4.Te6edf3toContainTb4b4b4(Ta5d6ff"overflow-y-auto bg-white dark:bg-zinc-950"Tb4b4b4)Tb4b4b4;
Te6edf3expectTb4b4b4(Te6edf3cvTb4b4b4)Tb4b4b4.Te6edf3notTb4b4b4.Te6edf3toMatchTb4b4b4(Ta5d6ff/id="messages"[\s\S]{0,200}overflow-y-scroll/Tb4b4b4)Tb4b4b4;
Te6edf3expectTb4b4b4(Te6edf3cvTb4b4b4)Tb4b4b4.Te6edf3toContainTb4b4b4(Ta5d6ff"composerChromeStyle"Tb4b4b4)Tb4b4b4;
Te6edf3expectTb4b4b4(Te6edf3cvTb4b4b4)Tb4b4b4.Te6edf3toContainTb4b4b4(Ta5d6ff"updateKeyboardInset"Tb4b4b4)Tb4b4b4;
Te6edf3expectTb4b4b4(Te6edf3cvTb4b4b4)Tb4b4b4.Te6edf3toContainTb4b4b4(Ta5d6ff"env(safe-area-inset-bottom"Tb4b4b4)Tb4b4b4;
Te6edf3expectTb4b4b4(Te6edf3cvTb4b4b4)Tb4b4b4.Te6edf3toContainTb4b4b4(Ta5d6ff"flex-col gap-3 text-sm sm:flex-row sm:items-center"Tb4b4b4)Tb4b4b4;
Tb4b4b4}Tb4b4b4)Tb4b4b4;

Te6edf3itTb4b4b4(Ta5d6ff"MessagesPage mobile compose FAB and sheet clear safe-area and use dvh"Tb4b4b4, Tb4b4b4(Tb4b4b4) Tb4b4b4=> Tb4b4b4{
Tff7b72const Te6edf3page Tff7b72= Te6edf3srcTb4b4b4(Ta5d6ff"components/messages/MessagesPage.vue"Tb4b4b4)Tb4b4b4;
Te6edf3expectTb4b4b4(Te6edf3pageTb4b4b4)Tb4b4b4.Te6edf3toContainTb4b4b4(Ta5d6ff"bottom-[max(1.25rem,env(safe-area-inset-bottom,0px))]"Tb4b4b4)Tb4b4b4;
Te6edf3expectTb4b4b4(Te6edf3pageTb4b4b4)Tb4b4b4.Te6edf3toContainTb4b4b4(Ta5d6ff"max-h-[90dvh]"Tb4b4b4)Tb4b4b4;
Te6edf3expectTb4b4b4(Te6edf3pageTb4b4b4)Tb4b4b4.Te6edf3notTb4b4b4.Te6edf3toContainTb4b4b4(Ta5d6ff"max-h-[90vh]"Tb4b4b4)Tb4b4b4;
Tb4b4b4}Tb4b4b4)Tb4b4b4;

Te6edf3itTb4b4b4(Ta5d6ff"MicronEditor shows tab close on touch and splits at tablet width"Tb4b4b4, Tb4b4b4(Tb4b4b4) Tb4b4b4=> Tb4b4b4{
Tff7b72const Te6edf3page Tff7b72= Te6edf3srcTb4b4b4(Ta5d6ff"components/micron-editor/MicronEditorPage.vue"Tb4b4b4)Tb4b4b4;
Te6edf3expectTb4b4b4(Te6edf3pageTb4b4b4)Tb4b4b4.Te6edf3toContainTb4b4b4(Ta5d6ff"opacity-100 lg:opacity-0 lg:group-hover:opacity-100"Tb4b4b4)Tb4b4b4;
Te6edf3expectTb4b4b4(Te6edf3pageTb4b4b4)Tb4b4b4.Te6edf3toContainTb4b4b4(Ta5d6ff"window.innerWidth < 768"Tb4b4b4)Tb4b4b4;
Tb4b4b4}Tb4b4b4)Tb4b4b4;

Te6edf3itTb4b4b4(Ta5d6ff"Settings page scroll includes bottom safe-area"Tb4b4b4, Tb4b4b4(Tb4b4b4) Tb4b4b4=> Tb4b4b4{
Tff7b72const Te6edf3page Tff7b72= Te6edf3srcTb4b4b4(Ta5d6ff"components/settings/SettingsPage.vue"Tb4b4b4)Tb4b4b4;
Te6edf3expectTb4b4b4(Te6edf3pageTb4b4b4)Tb4b4b4.Te6edf3toContainTb4b4b4(Ta5d6ff"pb-[max(1.5rem,env(safe-area-inset-bottom))]"Tb4b4b4)Tb4b4b4;
Tb4b4b4}Tb4b4b4)Tb4b4b4;

Te6edf3describeTb4b4b4(Ta5d6ff"Toast + CallOverlay stacking"Tb4b4b4, Tb4b4b4(Tb4b4b4) Tb4b4b4=> Tb4b4b4{
Tff7b72let Te6edf3toastWrapperTb4b4b4;
Tff7b72let Te6edf3callWrapperTb4b4b4;

Te6edf3beforeEachTb4b4b4(Tb4b4b4(Tb4b4b4) Tb4b4b4=> Tb4b4b4{
Te6edf3toastWrapper Tff7b72= Te6edf3mountTb4b4b4(Te6edf3ToastTb4b4b4, Tb4b4b4{
Tffa657globalTff7b72: Tb4b4b4{
Te6edf3mocksTff7b72: Tb4b4b4{ Te6edf3$tTff7b72: Tb4b4b4(Te6edf3msgTb4b4b4) Tb4b4b4=> Te6edf3msg Tb4b4b4}Tb4b4b4,
Te6edf3stubsTff7b72: Tb4b4b4{
Te6edf3TransitionGroupTff7b72: Tb4b4b4{ Te6edf3templateTff7b72: Ta5d6ff"<div><slot /></div>" Tb4b4b4}Tb4b4b4,
Te6edf3MaterialDesignIconTff7b72: Tb4b4b4{ Te6edf3templateTff7b72: Ta5d6ff'<div class="mdi-stub"></div>'Tb4b4b4, Te6edf3propsTff7b72: Tb4b4b4[Ta5d6ff"iconName"Tb4b4b4] Tb4b4b4}Tb4b4b4,
Tb4b4b4}Tb4b4b4,
Tb4b4b4}Tb4b4b4,
Tb4b4b4}Tb4b4b4)Tb4b4b4;
Te6edf3callWrapper Tff7b72= Te6edf3mountTb4b4b4(Te6edf3CallOverlayTb4b4b4, Tb4b4b4{
Te6edf3propsTff7b72: Tb4b4b4{
Te6edf3activeCallTff7b72: Tb4b4b4{
Te6edf3remote_identity_hashTff7b72: Ta5d6ff"abcdef0123456789abcdef0123456789"Tb4b4b4,
Te6edf3remote_identity_nameTff7b72: Ta5d6ff"Peer"Tb4b4b4,
Te6edf3statusTff7b72: T79c0ff6Tb4b4b4,
Te6edf3is_incomingTff7b72: Tff7b72falseTb4b4b4,
Te6edf3is_voicemailTff7b72: Tff7b72falseTb4b4b4,
Te6edf3call_start_timeTff7b72: Tffa657DateTb4b4b4.Te6edf3nowTb4b4b4(Tb4b4b4) Tff7b72/ T79c0ff1000Tb4b4b4,
Te6edf3tx_bytesTff7b72: T79c0ff0Tb4b4b4,
Te6edf3rx_bytesTff7b72: T79c0ff0Tb4b4b4,
Tb4b4b4}Tb4b4b4,
Tb4b4b4}Tb4b4b4,
Tffa657globalTff7b72: Tb4b4b4{
Te6edf3mocksTff7b72: Tb4b4b4{
Te6edf3$tTff7b72: Tb4b4b4(Te6edf3msgTb4b4b4) Tb4b4b4=> Te6edf3msgTb4b4b4,
Te6edf3$routerTff7b72: Tb4b4b4{ Te6edf3pushTff7b72: Te6edf3viTb4b4b4.Te6edf3fnTb4b4b4(Tb4b4b4) Tb4b4b4}Tb4b4b4,
Tb4b4b4}Tb4b4b4,
Te6edf3stubsTff7b72: Tb4b4b4{
Te6edf3MaterialDesignIconTff7b72: Tff7b72trueTb4b4b4,
Te6edf3LxmfUserIconTff7b72: Tff7b72trueTb4b4b4,
Te6edf3AudioWaveformPlayerTff7b72: Tff7b72trueTb4b4b4,
Te6edf3TransitionTff7b72: Tb4b4b4{ Te6edf3templateTff7b72: Ta5d6ff"<div><slot /></div>" Tb4b4b4}Tb4b4b4,
Tb4b4b4}Tb4b4b4,
Tb4b4b4}Tb4b4b4,
Tb4b4b4}Tb4b4b4)Tb4b4b4;
Tb4b4b4}Tb4b4b4)Tb4b4b4;

Te6edf3afterEachTb4b4b4(Tb4b4b4(Tb4b4b4) Tb4b4b4=> Tb4b4b4{
Te6edf3toastWrapperTff7b72?Tb4b4b4.Te6edf3unmountTb4b4b4(Tb4b4b4)Tb4b4b4;
Te6edf3callWrapperTff7b72?Tb4b4b4.Te6edf3unmountTb4b4b4(Tb4b4b4)Tb4b4b4;
Tb4b4b4}Tb4b4b4)Tb4b4b4;

Te6edf3itTb4b4b4(Ta5d6ff"mobile toast bottom clears compose FAB band"Tb4b4b4, Tb4b4b4(Tb4b4b4) Tb4b4b4=> Tb4b4b4{
Tff7b72const Te6edf3cls Tff7b72= Te6edf3toastWrapperTb4b4b4.Te6edf3findTb4b4b4(Ta5d6ff"[class*='fixed']"Tb4b4b4)Tb4b4b4.Te6edf3classesTb4b4b4(Tb4b4b4)Tb4b4b4.Te6edf3joinTb4b4b4(Ta5d6ff" "Tb4b4b4)Tb4b4b4;
Te6edf3expectTb4b4b4(Te6edf3clsTb4b4b4)Tb4b4b4.Te6edf3toContainTb4b4b4(Ta5d6ff"max-sm:bottom-[calc(5.5rem+env(safe-area-inset-bottom,0px))]"Tb4b4b4)Tb4b4b4;
Tb4b4b4}Tb4b4b4)Tb4b4b4;

Te6edf3itTb4b4b4(Ta5d6ff"call overlay uses safe-area bottom and responsive width"Tb4b4b4, Tb4b4b4(Tb4b4b4) Tb4b4b4=> Tb4b4b4{
Tff7b72const Te6edf3root Tff7b72= Te6edf3callWrapperTb4b4b4.Te6edf3findTb4b4b4(Ta5d6ff"[class*='fixed']"Tb4b4b4)Tb4b4b4;
Te6edf3expectTb4b4b4(Te6edf3rootTb4b4b4.Te6edf3existsTb4b4b4(Tb4b4b4)Tb4b4b4)Tb4b4b4.Te6edf3toBeTb4b4b4(Tff7b72trueTb4b4b4)Tb4b4b4;
Tff7b72const Te6edf3cls Tff7b72= Te6edf3rootTb4b4b4.Te6edf3classesTb4b4b4(Tb4b4b4)Tb4b4b4.Te6edf3joinTb4b4b4(Ta5d6ff" "Tb4b4b4)Tb4b4b4;
Te6edf3expectTb4b4b4(Te6edf3clsTb4b4b4)Tb4b4b4.Te6edf3toContainTb4b4b4(Ta5d6ff"w-[min(20rem,calc(100%-1.5rem))]"Tb4b4b4)Tb4b4b4;
Te6edf3expectTb4b4b4(Te6edf3clsTb4b4b4)Tb4b4b4.Te6edf3toContainTb4b4b4(Ta5d6ff"bottom-[max(1rem,env(safe-area-inset-bottom,0px))]"Tb4b4b4)Tb4b4b4;
Te6edf3expectTb4b4b4(Te6edf3clsTb4b4b4)Tb4b4b4.Te6edf3toContainTb4b4b4(Ta5d6ff"max-sm:bottom-[calc(5.5rem+env(safe-area-inset-bottom,0px))]"Tb4b4b4)Tb4b4b4;
Tb4b4b4}Tb4b4b4)Tb4b4b4;
Tb4b4b4}Tb4b4b4)Tb4b4b4;

Te6edf3itTb4b4b4(Ta5d6ff"toast dismiss key still works after touch-target change"Tb4b4b4, Tff7b72async Tb4b4b4(Tb4b4b4) Tb4b4b4=> Tb4b4b4{
Tff7b72const Te6edf3wrapper Tff7b72= Te6edf3mountTb4b4b4(Te6edf3ToastTb4b4b4, Tb4b4b4{
Tffa657globalTff7b72: Tb4b4b4{
Te6edf3mocksTff7b72: Tb4b4b4{ Te6edf3$tTff7b72: Tb4b4b4(Te6edf3msgTb4b4b4) Tb4b4b4=> Te6edf3msg Tb4b4b4}Tb4b4b4,
Te6edf3stubsTff7b72: Tb4b4b4{
Te6edf3TransitionGroupTff7b72: Tb4b4b4{ Te6edf3templateTff7b72: Ta5d6ff"<div><slot /></div>" Tb4b4b4}Tb4b4b4,
Te6edf3MaterialDesignIconTff7b72: Tb4b4b4{ Te6edf3templateTff7b72: Ta5d6ff'<div class="mdi-stub"></div>'Tb4b4b4, Te6edf3propsTff7b72: Tb4b4b4[Ta5d6ff"iconName"Tb4b4b4] Tb4b4b4}Tb4b4b4,
Tb4b4b4}Tb4b4b4,
Tb4b4b4}Tb4b4b4,
Tb4b4b4}Tb4b4b4)Tb4b4b4;
Te6edf3GlobalEmitterTb4b4b4.Te6edf3emitTb4b4b4(Ta5d6ff"toast"Tb4b4b4, Tb4b4b4{ Te6edf3messageTff7b72: Ta5d6ff"X"Tb4b4b4, Te6edf3durationTff7b72: T79c0ff0 Tb4b4b4}Tb4b4b4)Tb4b4b4;
Tff7b72await Te6edf3wrapperTb4b4b4.Te6edf3vmTb4b4b4.Te6edf3$nextTickTb4b4b4(Tb4b4b4)Tb4b4b4;
Tff7b72await Te6edf3wrapperTb4b4b4.Te6edf3findTb4b4b4(Ta5d6ff"button"Tb4b4b4)Tb4b4b4.Te6edf3triggerTb4b4b4(Ta5d6ff"click"Tb4b4b4)Tb4b4b4;
Tff7b72await Te6edf3wrapperTb4b4b4.Te6edf3vmTb4b4b4.Te6edf3$nextTickTb4b4b4(Tb4b4b4)Tb4b4b4;
Te6edf3expectTb4b4b4(Te6edf3wrapperTb4b4b4.Te6edf3textTb4b4b4(Tb4b4b4)Tb4b4b4)Tb4b4b4.Te6edf3notTb4b4b4.Te6edf3toContainTb4b4b4(Ta5d6ff"X"Tb4b4b4)Tb4b4b4;
Te6edf3wrapperTb4b4b4.Te6edf3unmountTb4b4b4(Tb4b4b4)Tb4b4b4;
Tb4b4b4}Tb4b4b4)Tb4b4b4;
Tb4b4b4}Tb4b4b4)Tb4b4b4;


──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────